<template>
  <div class="order-wrapper">
    <van-tabs v-model="active" sticky>
      <van-tab title="进行中">
        <van-empty v-if="Object.keys(progress).length === 0" description="您还没有订单哦~" />
        <order-item v-else :data="progress">
          <template>
            <div class="right">
              <div class="cancel" @click="cancelPay">取消订单</div>
              <div class="pay" @click="$router.push('/payCarRent')">预付租金</div>
            </div>
          </template>
        </order-item>
      </van-tab>
      <van-tab title="历史订单">
        <van-empty v-if="!history.length" description="您还没有订单哦~" />
        <template v-for="(item,index) in history">
          <order-item :data="item" :key="index"/>
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import OrderItem from './components/OrderItem.vue'
export default {
  components: {OrderItem},
  data () {
    return {
      active: 0
    }
  },
  computed: {
    progress () {
      return this.$store.state.order.progress
    },
    history () {
      return this.$store.state.order.history
    }
  },
  methods: {
    // 取消支付
    cancelPay () {
      this.$toast.loading("取消订单中")
      const order = this.$store.state.order.progress
      // 清空进行中的订单
      this.$store.commit("order/changeProgress", {})
      order.cancel = false
      order.type = 'history'
      this.$store.commit("order/pushHistory",order)
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep.order-wrapper {
  .van-tabs.van-tabs--line {
    background-color: rgb(245, 245, 245);
    height: 617px;
    overflow-y: scroll;
  }
  .order-item-wrapper:last-child {
    margin-bottom: 15px;
  }
  .van-tabs__wrap {
    border-bottom: 1px solid #e5e4e4;
  }
}
</style>